<template>
  <div class="one back_white">
    <div>
      <el-form inline>
        <el-form-item label="关键字">
          <el-input v-model="searchDto.keyWord" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
              v-model="searchDto.status"
              placeholder="订单状态"
          >
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getOrderListByStatusFun">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="orderList" show-overflow-tooltip="true" border>
        <el-table-column label="ID" prop="id" width="70"></el-table-column>
        <el-table-column label="交易凭证" prop="orderSn"></el-table-column>
        <el-table-column label="用户ID" prop="memberId" width="70"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="用户名" prop="memberUsername" width="100"></el-table-column>
        <el-table-column label="收货人姓名" prop="receiverName"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-text  @click="goItem(scope.row.id)">查看订单项</el-text>
            <el-divider direction="vertical" border-style="solid" />
            <el-text type="danger" @click="openModify(scope.row)">修改</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="pageInfo.total"
          v-model:page-size="pageInfo.pageSize"
          v-model:current-page="pageInfo.pageNum"/>
    </div>
  </div>

  <div>
    <el-dialog
        v-model="modifySwitch"
        title="修改"
        width="500"
        :before-close="handleClose"
    >
      <div>
        <el-form :model="selectOrder">
          <el-form-item label="订单编号" prop="id">{{ selectOrder.id }}</el-form-item>
          <el-form-item label="收货人邮编" prop="">
            <el-input v-model="selectOrder.receiverPostCode">
            </el-input>
          </el-form-item>
          <el-form-item label="省份" prop="">
            <el-input v-model="selectOrder.receiverProvince">
            </el-input>
          </el-form-item>
          <el-form-item label="城市" prop="">
            <el-input v-model="selectOrder.receiverCity">
            </el-input>
          </el-form-item>
          <el-form-item label="区" prop="">
            <el-input v-model="selectOrder.receiverRegion">
            </el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="">
            <el-input v-model="selectOrder.receiverDetailAddress">
            </el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-radio-group v-model="selectOrder.status">
              <!--              label写法在element-plus3.0将会被弃用-->
              <el-radio-button :label="0">未付款</el-radio-button>
              <el-radio-button :label="1">待发货</el-radio-button>
              <el-radio-button :label="2">已发货</el-radio-button>
              <el-radio-button :label="3">已完成</el-radio-button>
              <el-radio-button :label="4">已关闭</el-radio-button>
              <el-radio-button :label="5">已失效</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="modifySwitch = false">取消</el-button>
          <el-button type="primary" @click="modify">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, watch} from "vue";
import {getOrderListByStatus, modifyOrder} from '@/api/home/order/order'
import {useMenusStore} from '@/store/permission'
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";

const store = useMenusStore()
const {menuCodes} = storeToRefs(store)
const router=useRouter()
let searchDto = reactive({
  status: -1,
  keyWord: ''
})
let statusOptions = [
  {label: '全部', value: -1},
  {label: '未支付', value: 0},
  {label: '未发货', value: 1},
  {label: '未收货', value: 2},
  {label: '已完成', value: 3},
  {label: '已关闭', value: 4},
  {label: '失效', value: 5},
]
let orderList = ref([])
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 13,
  total: 0
})
let selectOrder = ref()
let modifySwitch = ref(false)

function getOrderListByStatusFun() {
  getOrderListByStatus(pageInfo, searchDto).then(res => {
    orderList.value = res.data.records
    pageInfo.total = res.data.total - 0
  })
}

/**
 * 打开修改窗口
 * @param order
 */
function openModify(order) {
  selectOrder.value = order
  modifySwitch.value = true
}

function modify() {
  modifyOrder(selectOrder.value)
  modifySwitch.value = false
}
function goItem(orderId){
  router.push({
    path:'/home/order-item',
    query:{orderId}
  })
}
onMounted(() => {
  getOrderListByStatusFun()
})

watch([() => pageInfo.pageNum, () => pageInfo.pageSize], () => {
  /*分页按钮发送请求*/
  getOrderListByStatusFun()
})

</script>

<style scoped>
.footer {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

.one {
  /*保证分页器一直在底部*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

</style>
